<template>
  <el-card shadow="hover" class="section-card" v-if="submitted">
    <template #header>Y轴设置</template>
    <el-form-item label="Y轴标题颜色" prop="yTitleColor">
      <el-color-picker v-model="form.yTitleColor" />
    </el-form-item>
    <el-form-item label="Y轴标题大小" prop="yTitleSize">
      <el-input-number v-model="form.yTitleSize" :max="100" :min="1" :step="1" />
    </el-form-item>
    <el-form-item label="Y轴标签颜色" prop="yTextColor">
      <el-color-picker v-model="form.yTextColor" />
    </el-form-item>
    <el-form-item label="Y轴标签大小" prop="yTextSize">
      <el-input-number v-model="form.yTextSize" :max="100" :min="1" :step="1" />
    </el-form-item>
  </el-card>
</template>

<script lang="ts" setup>
import {defineOptions, defineProps, defineEmits, computed} from "vue";
defineOptions(
  {
    name: "XAxisCard2"
  }
)
const props = defineProps<{
  modelValue: {
    yTitleColor: string,
    yTitleSize: number,
    yTextColor: string,
    yTextSize: string
  },
  submitted: boolean
}>()

const emit = defineEmits<{(
    e: 'update:modelValue',
    payload: {
      yTitleColor: string,
      yTitleSize: number,
      yTextColor: string,
      yTextSize: string
    }
  )
}>()

const form = computed({
  get(){
    return props.modelValue
  },
  set(val){
    emit('update:modelValue', {...val})
  }
})

</script>

<style scoped>
.section-card {
  margin-bottom: 16px;
}
</style>
